{% extends "base.html" %}

{% load image_resize %}

{% block title %}Photo: {{ photo.name }}{% endblock %}

{% block head %}
<style>
<!--
table.photolink {
    border: 1px solid #000000;
    padding: 6px;
}
//-->
</style>
<script type="text/javascript">
    
    function updateLinks()
    {
        document.photolinkform.photolink.value = document.photolinkform.size.value
        document.photolinkform.embedcode.value = createEmbedCode()
    }

    function createEmbedCode()
    {
        str = '<div class="imagebox">'
        if (document.photolinkform.nameChecked.checked)
        {
            str += '<div class="imagename">{{ photo.name }}</div>'
        }
        if (document.photolinkform.linkChecked.checked)
        {
            str += '<a class="imagelink" href="">'
        }
        str += '<img src="' + document.photolinkform.size.value + '"/>'
        if (document.photolinkform.linkChecked.checked)
        {
            str += '</a>'
        }
        if (document.photolinkform.captionChecked.checked)
        {
            str += '<div class="imagecaption">{{ photo.caption }}</div>'
        }
        str += '</div>'
        return str
    }

    function onClickText(object)
    {
        updateLinks()
        object.select()
    }
    
</script>
{% endblock %}

{% block content %}
<h2>Photo '{{ photo.name }}' details:</h2>
TODO: Add a nice photo information page here...<br/><br/>

<img src="{{ photo.image|small }}" alt="{{photo.name}}"/><br/><br/>
Name: {{ photo.name }}<br/>
Caption: {{ photo.caption }}<br/>
Long Caption: {{ photo.long_caption }}<br/>
Original Url: {{ photo.image.url }}<br/>
Large Url: {{ photo.image|large }}<br/>
Medium Url: {{ photo.image|medium }}<br/>
Small Url: {{ photo.image|small }}<br />
Thumbnail Url: {{ photo.image|thumbnail }}<br/>
<br/>
<table class="photolink">
    <tr>
        <td>
Link to this photo....<br/>
        </td>
    </tr>
    <tr>
        <td>
<form name="photolinkform" action="" method="get">
<br/>
Select Size
<select name="size" onchange="updateLinks()">
    <option value="{{ photo.image|thumbnail }}">Thumbnail 48px</option>
    <option value="{{ photo.image|small }}" selected="selected">Small 300px</option>
    <option value="{{ photo.image|medium }}">Medium 600px</option>
    <option value="{{ photo.image|large }}">Large 1024px</option>
</select><br/>
<br/>
Direct Link<br/>
<input type="text" name="photolink" size="40" value="{{ photo.image.url }}" onclick="onClickText(this)"/><br/>
<br/>
Embed Image<br/>
<input type="text" name="embedcode" size="40" onclick="onClickText(this)"/><br/>
<br/>
<input type="checkbox" name="nameChecked" checked="checked" onchange="updateLinks()"/>Name | 
<input type="checkbox" name="captionChecked" checked="checked" onchange="updateLinks()"/>Caption | 
<input type="checkbox" name="linkChecked" checked="checked" onchange="updateLinks()"/>Link to this page<br/>
<br/>
</form>
        </td>
    </tr>
</table>
<br/>
{% endblock %}